<script lang="ts" setup>
import { ref } from 'vue'
import SearchInput from '@/components/SearchInput.vue'
import GoodsAuditIdCardTypeSelector from '@/components/GoodsAuditIdCardTypeSelector.vue'
import GoodsAuditStatusSelector from '@/components/GoodsAuditStatusSelector.vue'
import GoodsTypeSelector from '@/components/GoodsTypeSelector.vue'
import PublishCategoryListSelector from '@/components/PublishCategoryListSelector.vue'
import GoodsStatusSelector from '@/components/GoodsStatusSelector.vue'
import OrderStatusSelector from '@/components/OrderStatusSelector.vue'

// 筛选组件
const auditCardType = ref('')
const auditStatus = ref('')
const goodsType = ref('')
const goodsStatus1 = ref('')
const goodsStatus2 = ref('')
const orderStatus = ref('')
const goodsCate = ref('')
const searchValue = ref('')

</script>

<template>
	<div class="page">
		<n-card title="筛选组件">
			<GoodsAuditIdCardTypeSelector v-model:value="auditCardType" width="180"/>
			<GoodsAuditStatusSelector v-model:value="auditStatus" width="180"/>
			<GoodsTypeSelector v-model:value="goodsType" width="180"/>
			<GoodsStatusSelector v-model:value="goodsStatus1" width="180" goods-type="0" placeholder="一口价状态"/>
			<GoodsStatusSelector v-model:value="goodsStatus2" width="180" goods-type="1" placeholder="拍品状态"/>
			<OrderStatusSelector v-model:value="orderStatus" width="180"/>
			<PublishCategoryListSelector v-model:value="goodsCate" width="180"/>
			<SearchInput v-model:value="searchValue" placeholder="提示内容" width="180"/>
		</n-card>
		<n-card title="全局 message 组件">
			<div>
				window.$message.error('')
			</div>
			<div>
				'info' | 'success' | 'warning' | 'error' | 'loading' | 'default'
			</div>
		</n-card>
		<n-card title="全局 dialog 组件">
			<div>
				window.$dialog.info({ title:'', content:'' })
			</div>
			<div>
				'info' | 'success' | 'warning' | 'error'
			</div>
		</n-card>
		<n-card title="其他组件">
			<div>
				<AnyButton></AnyButton>
			</div>
			<div>
				'info' | 'success' | 'warning' | 'error'
			</div>
		</n-card>
	</div>
</template>
<style lang="less" scoped>
.page {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	padding: 20px;

	:deep(.n-card) {
		flex-grow: unset;
		flex-shrink: 0;
		border-radius: 10px;
		box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);

		.n-card__content {

			display: flex;
			gap: 20px;
			flex-wrap: wrap;
		}
	}
}

.pointer {
	cursor: pointer;
	color: #058cc0;
	user-select: none;
}
</style>
